<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台--管理员登录</title>

    <link rel="stylesheet" type="text/tailwindcss">
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>
    <!-- 自定义 Tailwind 配置（保持与用户登录页一致的颜色方案） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF', // 主色调：蓝色，与用户登录页保持一致
                        secondary: '#86909C', // 辅助色：浅灰
                        admin: '#36B37E', // 管理员专属色调：深绿色，体现专业感
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none;
            }
            .card-shadow {
                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
            }
        }

        /* 顶部导航样式 */
        #app {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4 pt-20">
<div id="loginApp" class="w-full max-w-md">

    <!-- <div id="app">
        //顶部导航
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-shopping-bag text-primary text-xl"></i>
                <span class="font-bold text-lg text-gray-800">ShopEasy 电商平台</span>
            </div>
            <div>
                <a href="/login.html" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-user-circle mr-1"></i>用户登录
                </a>
            </div>
        </div>
    </div> -->
    <top></top>
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 mt-4">
        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-gray-800 mb-2 flex items-center justify-center">
            <i class="fa fa-shield text-admin mr-3"></i>管理员登录
        </h1>
        <p class="text-gray-500">请使用管理员账号登录系统</p>
    </div>

    <!-- 登录卡片 -->
    <div class="bg-white rounded-xl card-shadow p-6 md:p-8 bg-gray-500/20">
        <!-- 管理员标识 -->
        <div class="flex items-center justify-center mb-6">
            <div class="w-16 h-16 rounded-full bg-admin/10 flex items-center justify-center">
                <i class="fa fa-user-secret text-2xl text-admin"></i>
            </div>
        </div>

        <!-- 登录表单 -->
        <form @submit.prevent="login" class="space-y-5">
            <!-- 错误提示 -->
            <div v-if="msg" class="text-red-500 text-sm text-center py-2 px-3 bg-red-50 rounded-lg">{{ msg }}</div>

            <!-- 用户名输入 -->
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">管理员账号</label>
                <div class="relative">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
            <i class="fa fa-user"></i>
          </span>
                    <input
                            type="text"
                            id="username"
                            v-model="form.username"
                            placeholder="请输入管理员账号"
                            class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                    >
                </div>
            </div>

            <!-- 密码输入 -->
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <div class="relative">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
            <i class="fa fa-lock"></i>
          </span>
                    <input
                            type="password"
                            id="password"
                            v-model="form.password"
                            placeholder="请输入密码"
                            class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                    >
                    <button
                            type="button"
                            @click="togglePassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary"
                    >
                        <i v-if="showPassword" class="fa fa-eye-slash"></i>
                        <i v-else class="fa fa-eye"></i>
                    </button>
                </div>
            </div>

            <!-- 记住我 & 普通用户登录 -->
            <div class="flex items-center justify-between">
                <label class="flex items-center">
                    <input type="checkbox" class="h-4 w-4 text-primary border-gray-300 rounded">
                    <span class="ml-2 text-sm text-gray-600">记住管理员</span>
                </label>
                <a href="/login.html" class="text-sm text-primary hover:underline">
                    <i class="fa fa-arrow-circle-left mr-1"></i>普通用户登录
                </a>
            </div>

            <!-- 登录按钮 -->
            <button
                    type="submit"
                    class="w-full bg-admin hover:bg-admin/90 text-white font-medium py-2.5 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center"
            >
                <i class="fa fa-sign-in mr-2"></i> 管理员登录
            </button>

            <!-- 安全提示 -->
            <div class="text-center text-xs text-gray-500 pt-2">
                <i class="fa fa-info-circle mr-1"></i> 管理员账号仅内部人员使用，请勿泄露
            </div>
        </form>
    </div>

    <!-- 页脚 -->
    <div class="mt-8 text-center text-sm text-gray-500">
        © 2025 ShopEasy 电商平台 管理系统，保留所有权利。
    </div>
</div>

<!-- 引入必要的脚本 -->
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#loginApp",
        data: {
            form: {
                username: '',
                password: '',
                role: 'admin'
            },
            msg: '',  // 错误消息
            showPassword: false,  // 控制密码显示状态
            util
        },
        methods: {
            login() {
                // 清空之前的错误消息
                this.msg = '';

                // 创建包含常量role的请求数据
                const requestData = {
                    ...this.form,  // 包含用户名和密码
                    role: 'admin'   // 添加常量role参数
                };

                axios.post("/users/login", requestData)
                    .then(response => {
                        const { token, ...user } = response;
                        sessionStorage.setItem("token", token);
                        util.store.set("user-info", user);
                        window.location = '/admin_management.html';
                    })
                    .catch(() => {
                        // 设置错误消息，触发显示
                        this.msg = '用户名或密码有误！';
                    });
            }
        }
    });
</script>
</body>
</html>
